<template>
	<view class="page_bg">
		<view class="input_bg">
			<u-input v-model="paymentPsw" type="number" maxlength="6" :border="false" placeholder="请输入六位支付密码" />
		</view>
		<view class="input_bg">
			<u-input v-model="phoneNumber" type="number" :border="false" placeholder="请输入手机号" />
			<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
			<view class="send_btn" @tap="checkCondition">{{tips}}</view>
		</view>
		<view class="input_bg">
			<u-input v-model="vCode" type="number" :border="false" placeholder="请输入验证码" />
		</view>
		<u-toast ref="uToast" />

		<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="changePhone">确定</u-button>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				paymentPsw: '',
				phoneNumber: '',
				vCode: '',
				tips: '',
				seconds: 60,
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			// 文本内容修改
			codeChange(text) {
				this.tips = text;
			},
			// 获取验证码前判断
			checkCondition() {
				if (!vk.pubfn.checkStr(that.phoneNumber, 'mobile')) {
					vk.toast('请输入正确的手机号码', "none");
					return;
				}
				vk.callFunction({
					url: 'client/setting/kh/checkPhone',
					title: '检测中...',
					data: { need_user_info: true, number: that.phoneNumber },
					success: function(data) {
						that.getVCode()
					}
				})
			},
			// 获取验证码
			getVCode() {
				if (this.$refs.uCode.canGetCode) {
					vk.userCenter.sendSmsCode({
						needAlert: false,
						data: {
							mobile: that.phoneNumber,
							type: 'resPayPsw',
						},
						success: function(data) {
							vk.toast('验证码已发送');
							that.$refs.uCode.start();
						},
						fail: function(err) {
							vk.alert("短信发送频繁，请稍后再试！");
						}
					})
				} else {
					vk.toast('倒计时结束后再发送', "none")
				}
			},
			// 修改手机号
			changePhone() {
				if (this.paymentPsw.length < 6) {
					vk.toast('请输入正确的支付密码', "none");
					return;
				}
				if (!vk.pubfn.checkStr(that.phoneNumber, 'mobile')) {
					vk.toast('请输入正确的手机号码', "none");
					return;
				}
				if (that.vCode == '') {
					vk.toast('请输入验证码', "none");
					return;
				}
				vk.callFunction({
					url: 'client/setting/kh/changePaymentPsw',
					title: '请求中...',
					data: {
						psw: that.paymentPsw,
						mobile: that.phoneNumber,
						code: that.vCode,
						need_user_info: true
					},
					success: function(res) {
						that.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
							back: true
						})
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background: #F5F5F5;
		padding-top: 20rpx;

		.input_bg {
			background: #FFFFFF;
			margin-bottom: 2rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
		}
	}

	.send_btn {
		min-width: 180rpx;
		height: 50rpx;
		background: #FF960C;
		color: #FFFFFF;
		font-size: 24rpx;
		border-color: #FFFFFF;
		border-radius: 8rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.save_btn {
		background-color: #333333;
		color: #FFFFFF;
		margin: 192rpx 30rpx 0;
	}
</style>
